/**
 * @Author: ls <ls-mac>
 * @Date:   2019-08-13 16:51:35
 * @Last modified by:   ls-mac
 * @Last modified time: 2019-09-24 04:31:27
 */
import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import moment from 'moment';
import common from 'utils/common';
import {
  Alert,
  Row,
  Col,
  Card,
  Checkbox,
  Form,
  Input,
  Select,
  Switch,
  Icon,
  Button,
  Dropdown,
  Menu,
  InputNumber,
  DatePicker,
  Popover,
  Popconfirm,
  TimePicker,
  Table,
  Modal,
  message,
  Badge,
  Divider,
  Upload,
} from 'antd';
import SimpleTable from 'components/SimpleTable';
import { relative } from 'path';
import styles from './enterprise.less';

import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const FormItem = Form.Item;

const CheckboxGroup = Checkbox.Group;

const InputGroup = Input.Group;

const TextArea = Input.TextArea;

const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

const { Option } = Select;

const CreateForm = Form.create()(prop => {
  const { modalVisible, familyDetail, form, props, handleCancel } = prop;
  const { dispatch } = props;
  const { getFieldDecorator, validateFields } = form;

  const handleOk = () => {
    validateFields((errors, values) => {
      dispatch({
        type: 'familyList/familyAddOrEdit',
        payload: { ...values, id: familyDetail.id },
        callback: res => {
          if (res.success) {
            handleCancel();
            dispatch({
              type: 'familyList/fetch',
              payload: {
                cardEmployeeNo: '', // 卡号、工号
                companyName: '', // 企业名称
                nameIdMobile: '', // 姓名、证件号、手机号
                pageIndex: '1',
                pageSize: '10',
              },
            });
            message.success('修改成功');
          } else {
            message.info(res.errorDesc);
          }
        },
      });
    });
  };

  return (
    <Modal
      title="修改家属信息"
      visible={modalVisible}
      onOk={handleOk}
      onCancel={() => handleCancel()}
      className=""
      okText="提交"
      width="850px"
      destroyOnClose
    >
      <Form layout="inline">
        <Row gutter={{ lg: 24 }}>
          <Col md={12} sm={24}>
            <FormItem label="&#12288;企业员工">
              {getFieldDecorator('employeeName', {
                initialValue: familyDetail?.employeeName,
              })(<Input placeholder="" disabled />)}
            </FormItem>
          </Col>
          <Col md={12} sm={24}>
            <FormItem label="姓名&#12288;&#12288;">
              {getFieldDecorator('name', {
                initialValue: familyDetail?.name,
                rules: [{ required: true, message: '请输入姓名' }],
              })(<Input placeholder="" />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ lg: 24 }}>
          <Col md={12} sm={24}>
            <FormItem label="性别&#12288;&#12288;">
              {getFieldDecorator('sex', {
                initialValue: familyDetail?.sex,
                rules: [{ required: true, message: '请选择性别' }],
              })(
                <Select placeholder="请选择" style={{ width: 150 }}>
                  <Option key={1}>男</Option>
                  <Option key={2}>女</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={12} sm={24}>
            <FormItem label="家属关系">
              {getFieldDecorator('relationType', {
                initialValue: familyDetail?.relationType,
                rules: [{ required: true, message: '请输入联系电话' }],
              })(
                <Select placeholder="请选择" style={{ width: 150 }}>
                  <Option key={1}>父母</Option>
                  <Option key={2}>子女</Option>
                  <Option key={3}>夫妻</Option>
                  <Option key={4}>其他</Option>
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ lg: 24 }}>
          <Col md={12} sm={24}>
            <FormItem label="证件类型">
              {getFieldDecorator('identityType', {
                initialValue: familyDetail?.identityType,
                rules: [{ required: true, message: '请选择证件类型' }],
              })(
                <Select placeholder="请选择" style={{ width: 150 }}>
                  <Option key={1}>身份证</Option>
                  <Option key={2}>护照</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={12} sm={24}>
            <FormItem label="证件号&#12288;">
              {getFieldDecorator('identityNo', {
                initialValue: familyDetail?.identityNo,
                rules: [{ required: true, message: '请输入证件号' }],
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ lg: 24 }}>
          <Col md={12} sm={24}>
            <FormItem label="婚姻状况">
              {getFieldDecorator('marriageStatus', {
                initialValue: familyDetail?.marriageStatus,
                rules: [{ required: true, message: '请选择婚姻状况' }],
              })(
                <Select placeholder="请选择" style={{ width: 150 }}>
                  <Option key={1}>未婚</Option>
                  <Option key={2}>已婚</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={12} sm={24}>
            <FormItem label="手机号&#12288;">
              {getFieldDecorator('mobile', {
                initialValue: familyDetail?.mobile,
                rules: [{ required: true, message: '请输入手机号' }],
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ lg: 24 }}>
          <Col md={12} sm={24}>
            <FormItem label="联系地址">
              {getFieldDecorator('address', {
                initialValue: familyDetail?.address,
                rules: [{ required: true, message: '请输入联系地址' }],
              })(<Input />)}
            </FormItem>
          </Col>
          <Col md={12} sm={24}>
            <FormItem label="生日&#12288;&#12288;">
              {getFieldDecorator('birthday', {
                initialValue: familyDetail?.birthday,
                rules: [{ required: true, message: '请输入生日' }],
              })(<Input />)}
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
});

@connect(({ familyList, loading }) => ({
  familyList,
  loading: loading.models.familyList,
}))
@Form.create()
export default class TableList extends PureComponent {
  state = {
    modalVisible: false,
    familyDetail: {},
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'familyList/fetch',
      payload: {
        cardEmployeeNo: '',
        companyName: '',
        nameIdMobile: '',
        pageIndex: '1',
        pageSize: '10',
      },
    });
  }

  // 分页
  handleStandardTableChange = pagination => {
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const params = {
        pageIndex: pagination.current,
        pageSize: pagination.pageSize,
        ...fieldsValue,
      };

      dispatch({
        type: 'familyList/fetch',
        payload: {
          ...params,
        },
      });
    });
  };

  // 重置
  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    dispatch({
      type: 'familyList/fetch',
      payload: {
        cardEmployeeNo: '', // 卡号、工号
        companyName: '', // 企业名称
        nameIdMobile: '', // 姓名、证件号、手机号
        pageIndex: '1',
        pageSize: '10',
      },
    });
  };

  handleSearch = e => {
    e.preventDefault();
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;

      const params = {
        pageIndex: 0,
        pageSize: 10,
        ...fieldsValue,
      };

      dispatch({
        type: 'familyList/fetch',
        payload: params,
      });
    });
  };

  handleEdit = r => {
    this.setState({
      modalVisible: true,
      familyDetail: r,
    });
  };

  handleDelete = r => {
    const { dispatch } = this.props;
    dispatch({
      type: 'familyList/familyDelete',
      payload: { id: r.id },
      callback: res => {
        if (res.success) {
          message.success('删除成功');
        } else {
          message.info(res.errorDesc);
        }
        this.handleFormReset();
      },
    });
  };

  handleCancel = () => {
    this.setState({
      modalVisible: false,
    });
  };

  handleAdd = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push('/Enterprise/company-storePage-add'));
  };

  reColumns = () => {
    return [
      {
        title: '姓名',
        dataIndex: 'name',
      },
      {
        title: '性别',
        dataIndex: 'sex',
        render: val => <span>{val === '1' ? '男' : '女'}</span>,
      },
      {
        title: '企业',
        dataIndex: 'companyName',
      },
      {
        title: '企业员工',
        dataIndex: 'employeeName',
      },
      {
        title: '家属关系',
        dataIndex: 'relationType',
        render: v => (
          <span>{v === '1' ? '父母' : v === '2' ? '子女' : v === '3' ? '夫妻' : '其他'}</span>
        ),
      },
      {
        title: '证件号',
        dataIndex: 'identityNo',
      },

      {
        title: '婚姻状况',
        dataIndex: 'marriageStatus',
        render: val => <span>{val === '1' ? '未婚' : '已婚'}</span>,
      },
      {
        title: '手机号码',
        dataIndex: 'mobile',
      },
      {
        title: '联系地址',
        dataIndex: 'address',
      },
      {
        title: '生日',
        dataIndex: 'birthday',
      },
      {
        title: '操作',
        render: (val, record) => (
          <div>
            <a onClick={() => this.handleEdit(record)}>修改</a>
            <br />
            <Popconfirm title="确认删除?" onConfirm={() => this.handleDelete(record)}>
              <a>删除</a>
            </Popconfirm>
          </div>
        ),
      },
    ];
  };

  renderSearchForm = () => {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row
          gutter={{
            md: 8,
            lg: 24,
            xl: 48,
          }}
        >
          <Col md={8} sm={24}>
            <FormItem>
              {getFieldDecorator('employeeName')(
                <Input style={{ width: 240 }} placeholder="请输入员工姓名" />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem>
              {getFieldDecorator('nameIdMobile')(
                <Input style={{ width: 240 }} placeholder="请输入家属姓名、证件号、手机号" />
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <div
              style={{
                overflow: 'hidden',
                height: '40px',
                lineHeight: '40px',
              }}
            >
              <span
                style={{
                  float: 'right',
                }}
              >
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
                <Button
                  style={{
                    marginLeft: 8,
                  }}
                  onClick={this.handleFormReset}
                >
                  重置
                </Button>
              </span>
            </div>
          </Col>
        </Row>
      </Form>
    );
  };

  render() {
    const columns = this.reColumns();
    const {
      familyList: { data },
      loading,
    } = this.props;

    const { modalVisible, familyDetail } = this.state;

    return (
      <PageHeaderLayout>
        <Card bordered={false} style={{ paddingBottom: '20px' }}>
          <div>
            <div className={styles.tableListForm}>{this.renderSearchForm()}</div>
            <SimpleTable
              selectedRows={false}
              loading={loading}
              data={data}
              columns={columns}
              onSelectRow={false}
              onChange={this.handleStandardTableChange}
            />
          </div>
        </Card>
        <CreateForm {...this} modalVisible={modalVisible} familyDetail={familyDetail} />
      </PageHeaderLayout>
    );
  }
}
